/**
  * @description: 1920标注&&路线地图背景
  * @author: hj
  * @update: hj(2020-06-08)
  */

import React, {useState} from 'react';
import styles from './index.module.scss';


class StaticBgMarkerLineMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: '',
            week: ''
        };
    }


    // 组件挂载之前
    componentWillMount = () => {
        const _this = this;
        this.getSystemTime();
    }
    // 组件挂载完成
    componentDidMount = () => {
        const _this = this;

        _this.drawMap();
    }
    // 接收父组件的数据改变
    componentWillReceiveProps = (nextProps) => {
        const _this = this;
    }

    // 获取当前系统时间
    getSystemTime = () => {
        let vWeek,vWeek_s,vDay;
            vWeek = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        let date =  new Date(),
            year = date.getFullYear(),
            month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
            day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
            hours = date.getHours(),
            minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
            seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            vWeek_s = date.getDay();
            
        let dateTime = year + "年" + month + "月" + day + "日" + "\xa0\xa0" + hours + ":" + minutes +":" + seconds;
        let weekTime = vWeek[vWeek_s];
        
        this.setState({
            date: dateTime,
            week: weekTime
        })
        
    };

    // 绘制地图
    drawMap = () => {
        const _this = this;

        let mapId = 'static-bg-marke-lLine-map';
        let map = new AMap.Map(mapId, {
            mapStyle: 'https://amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
            features: ['bg','road'],
            // center: [104.067923463,30.6799428454],
            center: [116.397732, 39.912152],
            resizeEnable: true,
            zoom: 12,
            // pitch: 46,
            // viewMode: '3D'
        });
        // 地图风格
        // map.setMapStyle( "https://amap://styles/darkblue");
        map.setMapStyle( "https://amap://styles/dark");
    
        // 添加线路
        let layer = new Loca.LineLayer({
            map: map,
        });
    
        // $.get('https://a.amap.com/Loca/static/mock/buslines_bj_zip.txt', function (data) {
    
            let start = [];
            let lines = [
                {"line_id":"110100010117","line_name":"21路(北京西站--安华桥北)","lnglat":[[116.32402,39.896538],[116.323349,39.896526],[116.323349,39.89687],[116.328559,39.896845],[116.328549,39.89731],[116.321907,39.89724],[116.321281,39.898571],[116.321258,39.907426],[116.335434,39.907227],[116.335533,39.909328],[116.33476,39.911563],[116.334545,39.91279],[116.334561,39.91404],[116.355064,39.913834],[116.356895,39.91396],[116.356583,39.920521],[116.356377,39.921619],[116.355537,39.941948],[116.355621,39.942657],[116.35614,39.943516],[116.356285,39.944717],[116.356461,39.945057],[116.356461,39.948833],[116.356354,39.949722],[116.355423,39.953217],[116.354286,39.976486],[116.393028,39.976826],[116.394157,39.976372],[116.394279,39.97177]]},
                {"line_id":"110100013761","line_name":"40路(木樨园桥北--五路)","lnglat":[[116.399635,39.85891],[116.39962,39.858322],[116.398697,39.857552],[116.398125,39.857346],[116.386856,39.857265],[116.386993,39.857418],[116.386978,39.858532],[116.386864,39.858643],[116.386948,39.863174],[116.3871,39.863899],[116.38781,39.86557],[116.38797,39.866547],[116.387901,39.871445],[116.387451,39.879005],[116.359222,39.878017],[116.358727,39.889458],[116.350639,39.88974],[116.35038,39.889931],[116.350052,39.89452],[116.350067,39.896778],[116.348221,39.896748],[116.348595,39.89756],[116.348373,39.899097],[116.348007,39.898983],[116.347916,39.898689],[116.347397,39.898235],[116.344986,39.897972],[116.332344,39.897346],[116.321907,39.897247],[116.321281,39.898533],[116.321266,39.907425],[116.313469,39.907688],[116.31221,39.908665],[116.310539,39.909019],[116.310417,39.923542],[116.310776,39.923817],[116.31073,39.924393],[116.310211,39.924614],[116.309288,39.924263],[116.30358,39.924053],[116.298538,39.92403],[116.298111,39.924202],[116.298111,39.925156],[116.297607,39.926029],[116.296982,39.938187],[116.295868,39.946953],[116.295868,39.947163],[116.295868,39.947498],[116.295914,39.948044],[116.296295,39.948208],[116.296478,39.9478],[116.296494,39.947193],[116.295906,39.947403],[116.295486,39.947529],[116.295067,39.947639],[116.294655,39.947727],[116.294205,39.947796],[116.29377,39.947895],[116.293648,39.949406],[116.2939,39.949593],[116.294647,39.949608],[116.294853,39.949406],[116.294907,39.948494],[116.294914,39.948086],[116.29493,39.94717],[116.294945,39.946255],[116.295639,39.940716],[116.295776,39.93809]]},
                {"line_id":"110100013773","line_name":"414路(地铁海淀五路居站--柳村)","lnglat":[[116.281876,39.932415],[116.284874,39.932152],[116.284882,39.924141],[116.295586,39.923935],[116.295944,39.923813],[116.295952,39.922878],[116.296425,39.922066],[116.296425,39.921772],[116.296249,39.919502],[116.295753,39.918583],[116.301453,39.915955],[116.302048,39.915035],[116.302063,39.912998],[116.306877,39.913013],[116.30806,39.912884],[116.313164,39.911427],[116.314484,39.911201],[116.320984,39.911068],[116.320992,39.908006],[116.321167,39.905964],[116.321136,39.897259],[116.319191,39.897248],[116.319057,39.897026],[116.319275,39.896854],[116.320091,39.896805],[116.329086,39.896851],[116.329102,39.893639],[116.328766,39.893421],[116.325867,39.893326],[116.325859,39.890942],[116.32634,39.889801],[116.326668,39.879768],[116.320984,39.879761],[116.321014,39.868107],[116.321274,39.864086],[116.321609,39.863091],[116.323479,39.860706],[116.326233,39.861485],[116.333481,39.861664],[116.333717,39.861862],[116.333893,39.863338],[116.334343,39.864098],[116.337372,39.865902],[116.337112,39.867294],[116.337189,39.867882],[116.342186,39.867882],[116.342079,39.868279],[116.340965,39.868275],[116.340942,39.871185],[116.341164,39.871181],[116.341164,39.87044]]},
                {"line_id":"110100013774","line_name":"414路(柳村--地铁海淀五路居站)","lnglat":[[116.340912,39.87233],[116.340965,39.868275],[116.337914,39.868252],[116.337349,39.868462],[116.337029,39.868862],[116.336906,39.87114],[116.337029,39.872684],[116.335556,39.872681],[116.328178,39.872299],[116.327461,39.871937],[116.327087,39.871395],[116.327049,39.87101],[116.327461,39.869781],[116.327477,39.869282],[116.327225,39.868824],[116.326721,39.868431],[116.32621,39.868259],[116.321136,39.868114],[116.32122,39.877228],[116.326736,39.878075],[116.326462,39.889458],[116.326439,39.889896],[116.325989,39.890812],[116.325935,39.89333],[116.328781,39.893353],[116.329308,39.893845],[116.329201,39.896854],[116.329063,39.897305],[116.321297,39.897251],[116.321274,39.907425],[116.321663,39.90799],[116.321663,39.911057],[116.314484,39.911201],[116.312458,39.911635],[116.308052,39.912922],[116.302155,39.912983],[116.302132,39.914997],[116.301704,39.915833],[116.301186,39.916225],[116.295906,39.91856],[116.297478,39.921045],[116.297569,39.922863],[116.297424,39.92318],[116.297447,39.923817],[116.297462,39.924835],[116.297691,39.925217],[116.297966,39.925232],[116.298019,39.924198],[116.297615,39.924049],[116.296387,39.924072],[116.295601,39.924088],[116.293701,39.924114],[116.289917,39.924206],[116.288239,39.924213],[116.286011,39.924274],[116.285713,39.924423],[116.284859,39.92445],[116.284866,39.932278],[116.284134,39.93253]]},
                {"line_id":"110100014346","line_name":"50路(北京西站--左安门外)","lnglat":[[116.324684,39.896828],[116.331596,39.896873],[116.345177,39.89761],[116.347565,39.897587],[116.348106,39.897259],[116.348244,39.896145],[116.348335,39.891594],[116.3479,39.890881],[116.3479,39.889969],[116.347603,39.889759],[116.347763,39.889297],[116.348053,39.88929],[116.34816,39.889473],[116.350098,39.889431],[116.350357,39.889225],[116.356544,39.889278],[116.35675,39.889389],[116.362015,39.889305],[116.362411,39.889149],[116.363487,39.889141],[116.364182,39.868858],[116.366371,39.869297],[116.36972,39.869698],[116.384705,39.870831],[116.385437,39.870502],[116.387573,39.870655],[116.387772,39.870506],[116.387878,39.866589],[116.386871,39.863262],[116.386734,39.857418],[116.386871,39.856884],[116.395546,39.857044],[116.41861,39.857075],[116.419441,39.856926],[116.420761,39.857021],[116.426735,39.858047],[116.432144,39.858395],[116.431931,39.861237],[116.43071,39.863384],[116.430687,39.865654],[116.431252,39.86586],[116.438782,39.865894],[116.439018,39.866984],[116.43941,39.866975],[116.439409,39.8668]]},
                {"line_id":"110100014347","line_name":"50路(左安门外--北京西站)","lnglat":[[116.439011,39.867908],[116.438797,39.865955],[116.431145,39.865932],[116.430611,39.866108],[116.43026,39.865955],[116.430565,39.865452],[116.430695,39.863472],[116.431931,39.861237],[116.432083,39.85881],[116.426025,39.858421],[116.420883,39.857552],[116.418701,39.857353],[116.405632,39.857117],[116.386856,39.857262],[116.386993,39.857418],[116.386986,39.858532],[116.386871,39.858643],[116.386948,39.863174],[116.3871,39.863899],[116.38781,39.86557],[116.38797,39.866547],[116.387932,39.870499],[116.387917,39.871006],[116.387879,39.871971],[116.39039,39.872136],[116.390411,39.87158],[116.38995,39.871419],[116.389478,39.871386],[116.387708,39.871284],[116.386517,39.871205],[116.385262,39.871246],[116.385235,39.871959],[116.383232,39.871635],[116.36834,39.870506],[116.365089,39.87035],[116.364418,39.870663],[116.364235,39.870956],[116.363647,39.889141],[116.363487,39.889389],[116.356125,39.889511],[116.355675,39.889637],[116.350639,39.889771],[116.350365,39.889931],[116.349962,39.895316],[116.350026,39.89679],[116.348213,39.896765],[116.348546,39.897407],[116.348567,39.898321],[116.348052,39.898543],[116.347409,39.898238],[116.346368,39.89809],[116.340263,39.89772],[116.331444,39.897327],[116.32283,39.89725]]},
                {"line_id":"110100014146","line_name":"616路(北京西站南广场--北潞园)","lnglat":[[116.322996,39.89274],[116.322911,39.892363],[116.324109,39.892376],[116.32412,39.893364],[116.328262,39.893337],[116.328987,39.893467],[116.329247,39.893864],[116.329063,39.897305],[116.321907,39.897243],[116.321655,39.897587],[116.321075,39.897724],[116.320381,39.897232],[116.314232,39.897217],[116.313637,39.897102],[116.31073,39.897102],[116.309914,39.897099],[116.309448,39.897312],[116.309425,39.897984],[116.309586,39.898209],[116.309853,39.898232],[116.310074,39.898045],[116.310097,39.897232],[116.310089,39.896778],[116.310089,39.896484],[116.310081,39.896187],[116.310242,39.895115],[116.310272,39.886852],[116.310143,39.886333],[116.309517,39.885292],[116.309502,39.88446],[116.309052,39.884098],[116.304764,39.882191],[116.301849,39.881187],[116.285088,39.877846],[116.282501,39.877159],[116.279945,39.876221],[116.262489,39.86779],[116.241173,39.859066],[116.239601,39.857952],[116.23877,39.856956],[116.23822,39.855824],[116.237366,39.852837],[116.236732,39.851955],[116.22541,39.845764],[116.223129,39.845036],[116.214462,39.843468],[116.212051,39.842579],[116.211021,39.841381],[116.210716,39.839699],[116.211807,39.834599],[116.213379,39.823856],[116.213509,39.822079],[116.213234,39.820461],[116.212288,39.818432],[116.211227,39.817081],[116.205597,39.812443],[116.204353,39.811069],[116.203728,39.810085],[116.203087,39.808552],[116.201813,39.802551],[116.200584,39.798504],[116.197319,39.790806],[116.196251,39.78886],[116.194473,39.787151],[116.191956,39.785892],[116.179794,39.783497],[116.176567,39.782684],[116.171921,39.780937],[116.168571,39.77914],[116.165939,39.777264],[116.164352,39.77589],[116.162025,39.773449],[116.156998,39.767628],[116.151131,39.761871],[116.14698,39.758427],[116.14193,39.755646],[116.141525,39.754734],[116.142006,39.752853],[116.142128,39.726479],[116.136086,39.726486],[116.135994,39.739281],[116.135742,39.739311],[116.131874,39.73716],[116.131578,39.737116],[116.13108,39.737323],[116.128296,39.73568]]},
                {"line_id":"110100014147","line_name":"616路(北潞园--北京西站南广场)","lnglat":[[116.128204,39.735645],[116.13106,39.737311],[116.131874,39.73716],[116.126205,39.733795],[116.122965,39.731557],[116.123035,39.731458],[116.123437,39.731573],[116.126371,39.733603],[116.134506,39.738422],[116.135536,39.738823],[116.135735,39.738766],[116.135957,39.738612],[116.136009,39.726479],[116.14222,39.726498],[116.142136,39.752201],[116.142441,39.753704],[116.14386,39.755844],[116.14872,39.759521],[116.152557,39.762848],[116.156998,39.767277],[116.163956,39.775188],[116.166664,39.777542],[116.169075,39.77919],[116.171326,39.780426],[116.173508,39.781403],[116.17675,39.782524],[116.181023,39.783546],[116.192047,39.785706],[116.193306,39.786205],[116.19487,39.787163],[116.196388,39.788662],[116.197685,39.791039],[116.201118,39.799286],[116.202011,39.802284],[116.203262,39.80825],[116.203995,39.810059],[116.204697,39.811108],[116.205803,39.812321],[116.211349,39.816986],[116.212395,39.818279],[116.21328,39.820103],[116.213547,39.821152],[116.213646,39.822914],[116.212402,39.831821],[116.211067,39.839542],[116.211121,39.840626],[116.211281,39.840992],[116.213005,39.842766],[116.214096,39.843201],[116.223175,39.844891],[116.22551,39.845699],[116.236763,39.851734],[116.237549,39.85281],[116.238731,39.856609],[116.239723,39.857868],[116.241074,39.858868],[116.243904,39.860161],[116.26255,39.867645],[116.279938,39.876072],[116.282562,39.877048],[116.285446,39.877796],[116.301872,39.881054],[116.304367,39.881912],[116.306419,39.882786],[116.309227,39.884048],[116.309326,39.884098],[116.310181,39.88448],[116.310318,39.884548],[116.310783,39.884754],[116.310966,39.884838],[116.311378,39.884754],[116.311478,39.884525],[116.31147,39.884071],[116.311226,39.883797],[116.310829,39.883785],[116.310661,39.884148],[116.310638,39.884285],[116.310524,39.885372],[116.310509,39.885578],[116.310478,39.885777],[116.310432,39.886345],[116.310394,39.895306],[116.310509,39.896179],[116.310677,39.896328],[116.31221,39.896393],[116.313057,39.896804],[116.314181,39.896869],[116.329086,39.896851],[116.329193,39.894051],[116.328979,39.893517],[116.324974,39.89337]]},
            ];
    
            let colors = ['#07E8E4','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00'];
            layer.setData(lines, {
                lnglat: 'lnglat'
            });
    
            lines.map((item,index) => {
                layer.setOptions({
                    style: {
                        borderWidth: 2,
                        opacity: 1,
                        color: '#07E8E4',
                    }
                });
    
                new AMap.Text({
                    text: item.line_name,
                    position: item.lnglat[10],
                    map: map,
                    style: {
                        'background-color':'#ccccff',
                        'border-color':'white',
                        'font-size':'12px'
                    }
                })
            })
            // layer.setOptions({
            //     style: {
            //         borderWidth: 5,
            //         opacity: 1,
            //         color: function(v){
            //             let id = v.value.line_id;
            //             let len = colors.length;
            //             return colors[id % len];
            //         },
            //     }
            // });
            
            // layer.setData(lines, {
            //     lnglat: 'linePath'
            // });
            // layer.setOptions({
            //     style: {
            //         // 3D Line 不支持设置线宽，线宽为 1px
            //         // borderWidth: 1,
            //         opacity: 0.4,
            //         color: '#07E8E4',
            //     }
            // });
    
            layer.render();
        // })
    
        // $.get('https://a.amap.com/Loca/static/mock/buslines_bj_zip.txt', function (data) {
    
        //     let start = [];
        //     let lines = data.split('&').map(function (item) {
        //         return {
        //             linePath: item.split(';').map(function (lnglat, index) {
        //                 let ll = lnglat.split(',');
        //                 ll = [+ll[0], +ll[1]];
        //                 if (index == 0) {
        //                     start = ll;
        //                 } else {
        //                     ll = [ll[0] / 1000 + start[0], ll[1] / 1000 + start[1]]
        //                 }
        //                 return ll;
        //             })
        //         };
        //     });
    
        //     layer.setData(lines, {
        //         lnglat: 'linePath'
        //     });
    
        //     layer.setOptions({
        //         style: {
        //             // 3D Line 不支持设置线宽，线宽为 1px
        //             // borderWidth: 1,
        //             opacity: 0.4,
        //             color: '#07E8E4',
        //         }
        //     });
    
        //     layer.render();
        // })
    
        // 添加maker
        // 构造点标记
        let labelContent = "<div class='labelContent'>川A32B75</div>";
        let labelOffset = new AMap.Pixel(-15,-20);
        let markerData = [
            {
                name: '川A32B75',
                lnglat: [116.397732, 39.912152]
            }, {
                name: '川A22548',
                lnglat: [116.482876,39.936901]
            }, {
                name: '川A33204',
                lnglat: [116.416958,40.002155]
            }, {
                name: '川A13145',
                lnglat: [116.289242,39.932689]
            }, {
                name: '川ASB250',
                lnglat: [116.366146,39.876856]
            }
        ]
        markerData.map((item,index) => {
            let marker = new AMap.Marker({
                icon: require('./images/cart.png'),
                position: item.lnglat,
                anchor: 'center', //设置锚点
                offset: new AMap.Pixel(0,0), //设置偏移量
                label: {
                    content: "<div class='labelContent'>"+item.name+"</div>",
                    offset: labelOffset
                }
            });
            map.add(marker);
        })
        // let marker = new AMap.Marker({
        //     // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        //     icon: "images/cart.png",
        //     // position: [104.073116,30.656804],
        //     position: [116.397732, 39.912152],
        //     anchor: 'center', //设置锚点
        //     offset: new AMap.Pixel(0,0), //设置偏移量
        //     label: {
        //         content: labelContent,
        //         offset: labelOffset
        //     }
        // });
        // map.add(marker);
    }





    render() {
        
        // 实时显示系统时间
        setTimeout(() => {
            setInterval(this.getSystemTime(),1000)
        },1000);

        return (
            <div className={styles.staticBg} style={{width: this.props.width+'px',height: this.props.height+'px',zIndex: this.props.pageFlag == 'preview' ? 1 : 0}}>
                <div className={styles.staticTitle}>
                    <p style={{lineHeight: Math.floor(this.props.height * 0.11 * 0.68) + 'px'}}>{ this.props.title }</p>
                    <span className={styles.dateIcon}></span>
                    <span className={styles.date}>{ this.state.date }</span>
                    <span className={styles.week}>{ this.state.week }</span>
                </div>
                <div id='static-bg-marke-lLine-map' className={styles.StaticBgMarkerLineMap}></div>
            </div>
        )
    }

}

export default StaticBgMarkerLineMap;
